<template>
  <div class="order">
    <div class="top">
      <span @click="returngo">❤</span>
      <span>我的订单</span>
      <span> </span>
    </div>
    <div class="content">
      <ul>
        <li v-for="(item, i) in list" :key="i">
          <div v-for="li in item" :key="li.id" class="detail">
            <p class="img">
              <span class="h3" @click="gotodetail">查看详情💗</span>
              <img :src="li.pic" alt="" />
            </p>
            <p class="text">
              <span v-html="li.goodsName"></span>
              <span v-html="li.property" class="s2 grow"></span>
              <span class="grow"> {{ "X" + li.number }}</span>
            </p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { getorder } from "../../utils/api";
export default {
  data() {
    return {
      token: this.$store.state.token,
      list: [],
    };
  },
  mounted() {
    getorder(this.token).then((res) => {
      this.list = res.data.goodsMap;
      console.log(this.list);
    });
  },
  methods: {
    gotodetail() {},
    returngo() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="scss" scoped>
.top {
  width: 100%;
  height: 1rem;
  display: flex;
  justify-content: space-around;
  font-size: 0.35rem;
  align-items: center;
}
.content {
  width: 100%;
  height: 15.1rem;
  overflow: auto;
  .detail {
    width: 100%;
    height: 2rem;
    // background: re/d;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    border-bottom: 0.3rem solid #f5f5f5;
    align-items: center;
    .img {
      width: 2rem;
      //   background: red;
      padding-left: 0.25rem;
      padding-bottom: 0.5rem;
      img {
        width: 1.5rem;
        height: 1.5rem;
        border-radius: 0.06rem;
      }
      .h3 {
        font-size: 0.3rem;
      }
    }
    .text {
      width: 5rem;
      height: 100%;
      span {
        display: block;
      }
      .s2 {
        margin: 0.2rem 0 0.2rem 0;
      }
      .grow {
        color: gray;
      }
    }
  }
}
</style>
